<template>
    <div class="titles">
        <header>
            {{title}}
        </header>
        <main>
         <MyForm ref="form" :showLabel="false" lw="0" v-model="model" :opts="opts"></MyForm>
         <el-button :loading="queryLoading" @click="confirm">立即登录</el-button>
        </main>
    </div>
</template>

<script>
import {login} from "api/users";
    export default {
        name:"login",
        data() {
            return {
                title:process.env.VUE_APP_TITLE,
                /**
                 * 模型
                 */
                model:{},
                /**
                 * 表单配置项
                 */
                opts: {
                    username:{
                         ph: "请输入用户名",
                        title:"用户名",
                       required:true,
                       max:20,
                       rules:[{min:5}],
                    },
                    password:{
                         ph: "请输入密码",
                        title:"密码",
                       required:true,
                       type:"password",
                       max:20,
                       rules:[{min:5}],
                    },
                }
            };
        },
        methods:{
            /**
             * 提交登录
             */
           async confirm(){
              try {
                await this.$refs.form.validate();
                this.queryLoading=true;
                const user=await login(this.model);
                this.$store.commit('setUser',user);
                this.$router.push({name:"MainLayout"});
                console.log(user);
              } catch (error) {
                console.log(error);
              }
               this.queryLoading=false;
           }
        }
    }
</script>

<style lang="scss" scoped>
$color:rgba(0,0,0,0.125);
.titles{
    width: 443px;
    margin: 0 auto;
    border: 1px solid $color;
    border-radius: 10px;
   margin-top: 96px;
      header{
        padding: 12px;
        font-size: 28px;
        color: #6c757d;
        text-align: center;
        border-bottom:1px solid $color;
    }
    main{
        padding: 20px;
        box-sizing: border-box;
        button{
            width: 100%;
            color: white;
            background: #399;
        }
    }
}

</style>